<template>
    <div class="clientseas-item">
      <div class="client-item-body" >
        <slot name="checkerItem"></slot>
        <div class="clearfix flex-block"  v-if="batchCheck === false">
          <div class="content">
            <div class="label-list baby-list clearfix" v-if="client.baby_list">
              <div v-for="(baby, index) in client.baby_list " :key="index" class="label-item baby-item" :class="{'pink': baby.baby_sex === 'FEMALE#'}">
                <div class="pull-left">
                  <span class="gender-ico gender-female" v-if="baby.baby_sex === 'FEMALE#'"></span>
                  <span class="gender-ico gender-male" v-else ></span>
                </div>
                <div class="pull-right">
                  <div class="baby-item-name">{{baby.baby_name}}</div>
                  <div class="baby-item-date">{{baby.baby_birthday | formateBirthDay }}</div>
                </div>
              </div>
            </div>
            <div class="client-desc">
              <span class="img-wrapper" v-if="custom_type == 0"><img data-object-fit="cover" :src="client.head_img_url" /></span>
              <span class="social-name" v-if="custom_type == 0">{{ client.nick_name | safeNickName }}</span>
              <span class="social-name" v-if="custom_type == 1" :class="{'no-margin':custom_type == 1}">{{ client.parent_name }}</span>
              <a v-if="client.mobile_num" href="javascript:void(0);" class="phone-mark mark-ico"></a>
              <span v-if="client.is_member == 1" class="member-mark mark-ico"></span>
              <span class="team-name" v-if="showTeam === true && client.team_id">团队</span>
              <span class="little-font grey">{{ client.location }}</span>
            </div>
            <div class="property-desc">
              <p v-if="client.source || client.source_name">来源: {{ client.source || client.source_name }}</p>
            </div>
            <div class="rec-follow grey" v-if="suser">所属顾问: {{ suser }}</div>
            <div class="rec-follow grey" v-if="client.last_contact_time">最近跟进时间: {{client.last_contact_time | getTime}}</div>
          </div>
        </div>
        <div class="pull-left" v-if="batchCheck === true">
          <div class="content">
            <div class="client-desc">
              <span class="img-wrapper" v-if="custom_type == 0"><img data-object-fit="cover" :src="client.head_img_url" /></span>
              <span class="social-name" v-if="custom_type == 0">{{ client.nick_name | safeNickName }}</span>
              <span class="social-name" v-if="custom_type == 1" :class="{'no-margin':custom_type == 1}">{{ client.parent_name }}</span>
              <a v-if="client.mobile_num" :href="'tel:' + client.mobile_num" class="phone-mark mark-ico"></a>
              <span v-if="client.is_member == 1" class="member-mark mark-ico"></span>
              <span class="team-name" v-if="showTeam === true && client.team_id">团队</span>
              <span class="little-font grey">{{ client.location }}</span>
            </div>
            <div class="rec-follow grey" v-if="client.last_contact_time">最近跟进时间: {{client.last_contact_time | getTime}}</div>

          </div>
        </div>
        <div class="assign-block pull-right" :class="{'no-img':custom_type == 1}" v-if="batchCheck === false">
          <!-- 主管分配 -->
          <span v-if="loginUser.is_team_manager == 1 && !onlyGet" class="reassignBtn" @click="assignUser(client.id)">分配</span>
          <!-- 顾问角色抢 -->
          <span v-if="(loginUser.is_team_manager != 1 || onlyGet) && client.can_get === true" class="doBtn" @click="obtainClient(client.id)">抢</span>
        </div>
      </div>
      <div class="property-items clearfix" :class="{'back': client.baby_list && !batchCheck}">
        <div class="property-item">{{ client.custom_status | getStatename }}</div>
        <div class="property-item">{{ client.custom_property | getUserByType }}</div>
        <div class="pull-right ">
          <router-link v-if="!isLinkToFollowRecord" class="view-detail" :to="{path: 'client-detail', query:{custom_id:client.id, custom_type:custom_type, id:client.id }}">查看详情<i class="arrow-go-grey"></i></router-link>
          <router-link v-if="isLinkToFollowRecord" class="view-detail" :to="{path: selectFollow ? 'add-follow': 'normal-clients-detail',
              query:{custom_id:client.id, custom_type:custom_type, id:client.id, back:selectFollow ? 'follow-record' : false, dd_nav_bgcolor: 'FF5E97F6'}}">查看详情<i class="arrow-go-grey"></i></router-link>
        </div>
      </div>
  </div>


</template>

<script>
  import store from '../store'
  import {showDialog, hideDialog} from '../lib/dialog'
  import { Checker, CheckerItem } from 'vux/src/components/checker'

  import { mapState, mapActions } from 'vuex'

  const INTEL_CLIENT_SEA = 'intel-client-seas'
  const NORMAL_CLIENT_SEA = 'normal-client-seas'

  export default{
    props: {
      client: {
        type: Object,
        require: true
      },
      showTeam: {
        type: Boolean,
        default: false
      },
      batchCheck: {
        type: Boolean,
        default: false
      },
      canGet: {
        type: Boolean,
        default: false
      },
      onlyGet: {
        type: Boolean,
        default: false
      },
      isLinkToFollowRecord: {
        type: Boolean,
        default: false
      },
      suser: {
        type: String
      }
    },
    data () {
      return {
        custom_type: 0,
        selectFollow: false
      };
    },
    mounted () {
      let query = this.$route.query
      this.custom_type = query.custom_type
    },
    methods:{
      obtainClient(clientID) {
        let info = {
          target_suid: '',
          custom_id: clientID,
          out_batch_no: this.client.out_batch_no,
          distribute_type: 'GH#',
          opt_type: 'GET'
        };

        let that = this;
        let method = ''
        
        if (this.type === NORMAL_CLIENT_SEA) {
          method = 'distribute'
        } else if (this.type === INTEL_CLIENT_SEA ){
          method = 'robIntelSeaCustom'
        }
        method && this[method](info).then((response) => {
          if(response.data.errcode === 0) {
            alert('抢客户成功！');
            location.reload()
          // that.$router.back();
          } else {
            showDialog(response.data.errmsg);
            console.log(JSON.stringify(response.data));
          }
        }).catch((error) => {
          console.log(error)
        })
      },

      assignUser(clientID) {
        console.log(clientID, 'clientID...')
        this.$emit('on-click', clientID);
      },
      ...mapActions({
        robIntelSeaCustom: 'robIntelSeaCustom',
        distribute: 'distribute'
      })
    },

    components: {
      Checker,
      CheckerItem
    },

    computed:{
      loginUser () {
        return this.$store.state.app.user;
      },
      ...mapState({
        isShowCover: state => state.app.isShowCover,
        loginUser: state => state.app.user,
        isAppMode: state => state.config.isAppMode,
        type: state => state.route.name
      })
    }
  }
</script>
<style>
.gender-female,.gender-male {
  font-family: "Microsoft Yahei", 微软雅黑, arial, 宋体, sans-serif;
  font-weight: bolder;
}

.gender-female {
  color:#f75fb6;
}

.gender-male {
  color:#35adff;
}
</style>
<style lang="less">
  @import '../less/index.less';

  .clientseas-item {
    background-color: white;
    padding: 10px;
    margin: 10px 0;


    &:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }

    .property-desc {
      p {
        padding: 2px 0;
      }
      font-size: 12px;
      color: #a9a6a6;
    }

    @batch-check-item-size: 26px;
    .batch-check-item {
      border-radius: 20px;
      width: @batch-check-item-size;
      margin-top: 30px;
      height: @batch-check-item-size;
      line-height: @batch-check-item-size + 4;
      text-align: center;
      margin: 10px 10px 0 0;
      display: inline-block;
      border: 1px solid grey;
      -webkit-appearance: none;

      &.actieve {
        border: 1px solid #23B2E2;
      }

      &.actieve.selected-ico {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 16px;
        background-color: #23B2E2;
      }
    }

    .baby-list {
      margin-top: 10px;
      // border-top: 1px solid #eceaea;
      // border-bottom: 1px solid #eceaea;
      padding-bottom: 10px;

      i {
        // color: grey;
        // font-size: 12px;
        // font-weight: 1000;
      }
    }


    .baby-item {
      font-size: 13px;
      padding-top: 4px;
    }

    .client-item-body{
      &:extend(.clearfix all);
      white-space: nowrap;
      // border-bottom: 1px solid #e0dcdc;
      padding-bottom: 6px;
      display: flex;
      width: 100%;

      .pull-left {
        float: left;
      }

      .flex-block {
        flex: 1;
      }

      @assign-block-size: 60px;

      .assign-block {
        width: 20%;
        text-align: right;
        width: @assign-block-size;
        flex: 0;
        position: relative;;
        // float: right;

       .reassignBtn,.doBtn {
         display: inline-block;
        //  margin-top: 1.5rem;
         border:1px solid #00AEEE;
         color: #00AEEE;

         float: right;
         text-align: center;
         letter-spacing: 2px;
         border-radius: 2px;
         font-size: 16px;

         @reassignBtnSize: 28px;
         height: @reassignBtnSize;
         line-height: @reassignBtnSize;
       }

       .reassignBtn{
        //  margin-top: 2rem;
        //  margin-right: 10px;
         width: @assign-block-size;
       }

       @media(max-width: 350px) {
         .reassignBtn{
           margin-top: 50%;
           margin-right: 6px;
           width: 56px;
           font-size: 14px;
         }
       }

       .doBtn{
         border-radius: 50%;
         @doBtnSize:50px;

         width: @doBtnSize;
         height: @doBtnSize;
         line-height: @doBtnSize;
       }

       &.no-img {
         .reassignBtn,.doBtn {
           //  margin-top: 10%;
          position: absolute;
          bottom: 10%;
          right: 10px;
         }
       }

      }
    }

    .client-desc {
       display: block;
       margin-bottom: 10px;

       &>*{
       vertical-align: middle;
       }


    }

    .img-wrapper {

      width: 3em;
      height: 3em;
      display: inline-block;

      img {
        border-radius: 3em;
        border: 1px solid #eee;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    a,a:hover,a:visited,a:focus{
    }

    .social-name{
      display: inline-block;
      margin-left: 10px;
      font-weight: bolder;
    }

    .team-name {
      display: inline-block;
      text-align: center;
      border: 1px solid red;
      padding: 2px 2px;
      line-height: 12px;
      font-size: 12px;
      border-radius: 2px;
      color: red;
    }

    .rec-follow{
      font-size: 13px;
      margin-top: 10px;
      margin-bottom: 4px;
     }

     .property-items {
       margin:2px 0 0;
       padding: 6px 0;
       border-top: 1px solid #F7F7F7;

       &.back {
       }
     }

     .property-item {
       display: inline-block;
       // padding-right: 12px;
       line-height: 12px;
       height: 12px;
       font-size: 12px;
       border: 1px solid #F7F7F7;
       color: #a9a6a6;
       border-radius: 6px;
       padding: 3px 8px;
     }

     .property-item:not(:first-child) {
       padding-left: 12px;
     }

    .label-list{

      &:extend(.clearfix all);

      label{
        float: left;
      }

      a {
        padding: 2px 8px;
        display: block;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        margin-right: 10px;
        background-color: #35ADFF;
      }
    }


    .little-font{
      font-size: 12px;
    }


    .grey{
      color: #6B6B6B;
    }
  }
</style>
